<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .w{
            width:1220px;
            height:600px;
            background-color: #ff8500;
            /*水平居中*/
            margin: 0 auto;
        }
        ul{
            /*去掉li前的黑点*/
            list-style: none;
        }
        .w ul li{

            float:left;
            width:297.5px;
            /*
            算法：总宽度：1220，我们期望四个方块之间的间距为10px
            那么每个盒子的宽度为：（1220-10*3）/4=297.5
            */
            height: 297.5px;
            background-color: darkblue;
            margin-right: 10px ;
        }
        /*去掉最后一个li的margin-right*/
        .w ul li:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
<div class="w">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

</div>

</body>
</html>